<template>
    <div class="serve">
        <div class="title">{{title}}</div>
        <div class="items">
            <div class="item" :class="{percent:!isImg}" v-for="(item,index) in serve" :key="index" @click="turn(item.path)">
                <span v-if="isImg"><img :src="item.img" alt=""></span>
                <span v-else class="num">{{item.num}}</span>
                <span class="name">{{item.name}}</span>
            </div>
        </div>
        <textarea ref="textInput" id="input">{{createShop}}</textarea>
    </div>
</template>

<script>
    import {showError} from '@/toast'
    import ClipboardJS from 'clipboard'
    export default {
        name : "userSeve",
        data(){
            return{
                createShop:'http://admin.zmzpl.com/hzcmall/#/goShop'
            }
        },
        props:{
            isImg:{
                type:Boolean,
                default:false
            },
            serve:Array,
            title:String
        },
        methods:{
            turn(path){
                if(!path){
                    showError('敬请期待')
                    return
                }
                if (path=='tel'){
                    this.$createDialog({
                        type: 'confirm',
                        icon: 'cubeic-alert',
                        title: '联系客服',
                        content: '是否拨打客服电话',
                        confirmBtn: {
                            text: '确定',
                            active: true,
                            disabled: false,
                            href: 'javascript:;'
                        },
                        cancelBtn: {
                            text: '取消',
                            active: false,
                            disabled: false,
                            href: 'javascript:;'
                        },
                        onConfirm: () => {
                            window.location.href = 'tel:4001794855'
                        }
                    }).show()
                    return
                }
                if (path=='open'){
                    this.showBtn()
                    return
                }
                this.$router.push({
                    path
                })
            },
            showBtn() {
                this.$createDialog({
                    type: 'confirm',
                    // icon: 'cubeic-alert',
                    title: '申请开店',
                    content: '请使用电脑微信，点击复制网址，在浏览器中登录，打开网页，完成开店流程',
                    confirmBtn: {
                        text: '复制',
                        active: true,
                        disabled: false,
                        href: 'javascript:;'
                    },
                    cancelBtn: {
                        text: '取消',
                        active: false,
                        disabled: false,
                        href: 'javascript:;'
                    },
                    onConfirm: () => {
                        this.$refs.textInput.select()
                        document.execCommand("copy")
                        this.$createToast({
                            type: 'correct',
                            time: 1000,
                            txt: '复制成功'
                        }).show()
                    }
                }).show()
            }
        }
    }
</script>

<style scoped lang="stylus">
    .serve
        background-color #fff
        margin-top 10px
        .title
            padding 10px 10px
            font-size 13px
            color #333
            font-weight bold
            border-bottom 1px solid rgb(245,245,245)
        .items
            padding 0 18px
            display flex
            flex-wrap wrap
            .percent
                flex 0 0 33.3%!important
            .item
                display flex
                flex-direction column
                justify-content center
                align-items center
                flex 0 0 25%
                padding 10px 0
                .name
                    font-size 11px
                    color #666
                    font-weight 200
                .num
                    font-size 18px
                    font-family DIN
                    color #333
                    margin-bottom 15px
                img
                    width 30px
                    height 30px
                    margin-bottom 6px
    #input
        opacity: 0
        height 0.1px
        width 0.1
</style>